// 封装组件懒加载复用逻辑
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

export function useObserver (apiFn) {
  const target = ref(null)
  // stop: 可执行的方法 用来停止对于元素的监听
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }], observerElement) => {
      // isIntersecting 布尔值  进入到视口区域就是true 出去就是false
      // 只要进入和出去都会重新执行回调
      // 在这里组件进入到了视口区域 isIntersecting true  -> 发请求

      // 一旦进入到视口一次之后 请求已经发送了一次 就应该立刻停止监听
      if (isIntersecting) {
        apiFn()
        // 停止监听
        stop()
      }
    },
    // 监听的元素刚进入视口区域就立刻触发回调函数
    { threshold: 0 }
  )
  return {
    target
  }
}

/**
 * 可复用的逻辑
 *  监听一个组件是否进入到视口区域 如果进入就执行ajax方法执行
 *
 * 变化的部分
 *  每个组件发送的ajax请求不一样
 *
 * 用法
 *  调用我的函数 我给你提供可复用的监听逻辑 需要你传下来一个符合你组件自己的ajax请求就可以
 *
 * 复用函数通用导出
 *  每一个复用函数都会导出一个响应式数据 将来供我们使用者使用
 *
 */
